<template>
  <div class="team">
    <!-- 头部 -->
    <div class="head">
      <div class="head-user">
        <img :src="userInfo.avatar" alt="" />
        <div class="head-info-r">
          <p class="name">用户名：{{ userInfo.name }}</p>
          <p class="phone">{{ userInfo.phone }}</p>
          <p class="one">
            <span>{{ userInfo.role }}</span>
          </p>
        </div>
      </div>
      <div class="head-edit">
        <p class="edit" @click="editInfo">
          编辑信息 <img src="../assets/跳转.png" alt="" />
        </p>
        <p class="time">创建时间: {{ userInfo.time }}</p>
      </div>
    </div>

    <!-- 订单卡片 -->
    <div class="order-data">
      <p class="time">
        <span>{{ date }}</span>
        <span>{{ hours }}更新</span>
        <img @click="getTime" src="../assets/更新.png" alt="" />
      </p>
      <ul class="data">
        <li>
          <span>总订单数</span>
          <b>{{ orderData.addOrderNum }}</b>
        </li>
        <li>
          <span>总订单金额(元)</span>
          <b>{{ orderData.allOrderMoney }}</b>
        </li>
        <li>
          <span>总收益(元)</span>
          <b>{{ orderData.allProfit }}</b>
        </li>
      </ul>
    </div>

    <!-- 核心数据 -->
    <div class="core-data">
      <div class="title">
        <img src="../assets/核心数据.png" alt="" /> <b>核心数据</b>
      </div>
      <div class="time-type">
        <span>时间类型</span>
        <ul>
          <li
            @click="changeType('昨日')"
            :class="[activeType == '昨日' ? 'activeType' : '']"
          >
            昨日
          </li>
          <li
            @click="changeType('本周')"
            :class="[activeType == '本周' ? 'activeType' : '']"
          >
            本周
          </li>
          <li
            @click="changeType('本月')"
            :class="[activeType == '本月' ? 'activeType' : '']"
          >
            本月
          </li>
        </ul>
      </div>
      <p class="update">更新时间: {{ updateTime }}</p>

      <div class="data-show">
        <ul>
          <li class="num">
            <span>订单数</span>
            <b>{{ coreData.allOrderNum }}</b>
          </li>
          <li>
            <span>订单金额(元)</span>
            <b>{{ coreData.orderMoney }}</b>
          </li>
        </ul>
        <ul>
          <li>
            <span>有效订单数</span>
            <b>{{ coreData.effectiveNum }}</b>
          </li>
          <li>
            <span>佣金收益(元)</span>
            <b>{{ coreData.commission }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "distributionTeam", // 分销团队
  data() {
    return {
      userInfo: {
        // 用户信息
        avatar: require("../assets/头像.png"), // 头像
        phone: "158****789",
        name: "张三三",
        role: "二级分销商", // 等级
        time: "2022-07-25 14:00",
      },
      orderData: {
        addOrderNum: "58", // 总订单数
        allOrderMoney: "5990.0", // 总订单金额
        allProfit: "1290.0", // 总收益
      },
      date: "7/25", // 日期
      hours: "14:58", // 当天时间
      activeType: "昨日", // 当前时间类型
      updateTime: "14:58", // 更新时间
      coreData: {
        allOrderNum: "54", // 总订单数
        orderMoney: "990.0", // 订单金额
        effectiveNum: "54", // 有效订单数
        commission: "320.0", // 佣金收益
      },
    };
  },
  created() {
    this.getTime();
  },
  methods: {
    // 编辑分销商信息
    editInfo() {},
    // 改变当前时间类型
    changeType(type) {
      this.activeType = type;
    },
    getTime() {
      var date = new Date(); // Sat Jul 06 2019 19:59:27 GMT+0800 (中国标准时间)
     let month = date.getMonth(); // 获取当前月份(0-11,0 代表 1 月)
     let day = date.getDate(); // 获取当前日(1-31)
        this.date = (month + 1)+'/'+day;
     let hours = date.getHours(); // 获取当前小时数(0-23)
     let min =  date.getMinutes(); // 获取当前分钟数(0-59)
      this.hours = hours + ':' + min;
      this.updateTime = hours + ':' + min;
    },
  },
};
</script>

<style lang="scss" scoped>
.team {
  background-color: #eee;

  .head {
    padding: 38px 34px 22px;
    height: 162px;
    background-image: url(../assets/head.png);
    background-size: 100% 162px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .head-user {
      height: 102px;
      display: flex;

      img {
        width: 102px;
        height: 102px;
        border-radius: 50%;
      }

      .head-info-r {
        margin-left: 22px;
        color: #fff;

        .name {
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }

        .phone {
          margin: 6px 0;
        }

        .one {
          background: #f0fdff35;
          border-radius: 16px;
          height: 34px;
          line-height: 36px;
          font-size: 20px;
          background-image: url(../assets/分销商.png);
          background-repeat: no-repeat;
          background-size: 34px;
          padding: 2px 13px 2px 40px;
          box-sizing: content-box;
          zoom: 85%;
        }
      }
    }

    .head-edit {
      height: 102px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .edit {
        font-size: 24px;
        color: #fff;
        text-align: right;
        img {
          width: 10px;
          height: 16px;
          margin-left: 14px;
        }
      }
      .time {
        color: #fff;
        font-size: 24px;
      }
    }
  }

  .order-data {
    width: 680px;
    // height: 194px;
    background-color: #fff;
    margin: 28px auto 20px;
    padding-bottom: 22px;

    border-radius: 6px;
    box-shadow: 0px 2px 6px 0px rgba(59, 59, 59, 0.15);
    .time {
      padding-right: 32px;
      padding-top: 28px;
      text-align: right;
      font-size: 24px;
      color: #a0a0a0;
      span{
        margin-left: 10px;
      }
      img {
        width: 22px;
        height: 22px;
        margin-left: 12px;
      }
    }
    .data {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 56px;
      margin-top: 38px;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          margin-bottom: 24px;
          font-size: 24px;
          color: #909090;
        }
        b {
          font-size: 34px;
          color: #101010;
        }
      }
    }
  }

  .core-data {
    padding: 42px 34px 0;
    background-color: #fff;
    .title {
      margin-bottom: 28px;
      padding-bottom: 26px;
      border-bottom: 2px solid #e0e0e0;
      img {
        width: 22px;
        height: 22px;
        margin-right: 14px;
      }
      b {
        font-size: 34px;
      }
    }
    .time-type {
      display: flex;
      align-items: center;
      ul {
        margin-left: 30px;
        display: flex;
        align-items: center;
        li {
          width: 84px;
          height: 38px;
          line-height: 38px;
          margin-right: 24px;
          text-align: center;
          border-radius: 4px;

          color: #909090;
          background: #a7a7a728;
        }
        .activeType {
          font-size: 24px;
          color: #fead00;
          background: #feba322f;
        }
      }
    }
    .update {
      margin-top: 28px;
      padding-bottom: 28px;
      margin-bottom: 38px;
      border-bottom: 2px solid #e0e0e0;
    }
    .data-show {
      padding-right: 120px;
      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 70px;
        li {
          display: flex;
          flex-direction: column;
          // align-items: center;

          span {
            font-size: 24px;
            margin-bottom: 25px;

            color: #909090;
          }
          b {
            font-size: 34px;
          }
        }
      }
    }
  }
}
</style>